<template>
  <div class="g-dialog-panel">
    <div class="g-dialog-title">
      <span>Account</span>
      <div class="g-clickable close" @click="close">
        <i class="iconfont icon-close"></i>
      </div>
    </div>
    <div class="account">
      <div class="address">
        <img src="@/assets/images/logo-small.png" />
        <span v-if="account">{{ account | formatAccount }}</span>
      </div>
      <div class="button-group">
        <div class="g-clickable button" @click="copyAddress">
          <i class="iconfont icon-copy"></i>
          <span>Copy Address</span>
        </div>
        <div class="g-clickable button" @click="disConnect">
          <i class="iconfont icon-exit"></i>
          <span>Disconnect</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAvailableChainList } from "@/config/chain";
import store from "@/store";
import { mapState } from "vuex";
import copy from "copy-to-clipboard";
import showToast from "@/components/toast";

export default {
  data() {
    return {
      code: "",
      list: getAvailableChainList(),
    };
  },
  computed: {
    ...mapState({
      chainCode: (state) => state.chainCode,
      account: (state) => state.account,
    }),
  },
  methods: {
    close() {
      this.$emit("close");
    },
    copyAddress() {
      copy(this.account);
      showToast("Copy address success!");
      this.$emit("close");
    },
    disConnect() {
      store.commit("SET_ACCOUNT", "");
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.account {
  overflow: auto;
  max-height: 420px;
  padding: 30px 30px 0;
  margin: 0 -30px;

  .address {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 12px 0 42px;

    img {
      width: 56px;
      margin-bottom: 16px;
    }

    span {
      font-size: 16px;
      text-align: center;
    }
  }

  .button-group {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .button {
      flex: 1;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: var(--border-color);
      border-radius: 10px;
      padding-bottom: 6px;

      &:first-child {
        margin-right: 10x;
      }

      &:last-child {
        margin-left: 10px;
      }

      .iconfont {
        font-size: 20px;
        line-height: 1;
        margin-bottom: 8px;
        color: var(--color-des);
        transform: scale(1.3);
      }

      span {
        font-size: 14px;
        color: var(--color);
      }
    }
  }
}
</style>
